<template>
  <div class="home-container">
    <!-- <el-card class="filter-card"> -->
    <div class="header-content">

      <div
        slot="header"
        class="clearfix"
      >
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>年度协议管理</el-breadcrumb-item>
          <el-breadcrumb-item>二级商协议</el-breadcrumb-item>
          <el-breadcrumb-item>新增二级商协议</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="page-title">新增二级商协议</div>
      </div>
    </div>
    <!-- </el-card> -->

    <el-form
      ref="form"
      :model="form"
      :rules="formRules"
      label-width="100px"
      style='padding:0 20px;'
    >
      <!-- 1.协议主体 -->
      <fieldset
        class='fieldset num1'
        align="center"
      >
        <legend>

          <el-badge
            class="mark"
            type="primary"
            :value="1"
          />
          <p>
            协议主体
          </p>
        </legend>
      </fieldset>
      <el-card>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="协议客户"
              prop='client'
            >
              <el-select
                v-model="form.client"
                placeholder="选择客户"
              >
                <el-option
                  label="上海正也医药有限公司"
                  :value="0"
                ></el-option>
                <el-option
                  label="上海正也医药有限公司2"
                  :value="1"
                ></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="协议状态">
              <el-select v-model="form.status">
                <el-option
                  label="正常"
                  :value="0"
                ></el-option>
                <el-option
                  label="不正常"
                  :value="1"
                ></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购进指标">
              <el-row>
                <el-col :span="8">
                  <el-select v-model="form.purchase">
                    <el-option
                      label="金额"
                      :value="0"
                    ></el-option>
                    <el-option
                      label="数量"
                      :value="1"
                    ></el-option>

                  </el-select>
                </el-col>
                <el-col
                  :span="14"
                  style="margin-left:10px"
                >
                  <el-input
                    v-model="form.purchaseNumber"
                    placeholder="输入金额/数量"
                  >

                  </el-input>
                </el-col>

              </el-row>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纯销指标">
              <el-row>
                <el-col :span="8">
                  <el-select v-model="form.sales">
                    <el-option
                      label="金额"
                      :value="0"
                    ></el-option>
                    <el-option
                      label="数量"
                      :value="1"
                    ></el-option>

                  </el-select>
                </el-col>
                <el-col
                  :span="14"
                  style="margin-left:10px"
                >
                  <el-input
                    v-model="form.salesNumber"
                    placeholder="输入金额/数量"
                  >

                  </el-input>
                </el-col>

              </el-row>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售区域">
              <el-select
                multiple
                v-model="form.salesArea"
                placeholder='选择区域'
              >
                <el-option
                  label="全国"
                  :value="0"
                >
                </el-option>
                <el-option
                  label="江浙沪"
                  :value="1"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签订时间">
              <el-date-picker
                v-model="form.date"
                format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="购进渠道">
              <el-select v-model="form.channel">
                <el-option
                  label="指定渠道"
                  :value="0"
                ></el-option>
                <el-option
                  label="自定义渠道"
                  :value="1"
                ></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
            v-if="form.channel==1"
          >
            <el-form-item label-width="100px">
              <el-input
                v-model="form.channelNum"
                placeholder="请输入渠道名称编码"
              ></el-input>
            </el-form-item>

          </el-col>
          <el-col
            :span="24"
            v-if="form.channel==0"
          >
            <el-table
              :data="tableData"
              style="width: 100%;margin-left:100px;"
              highlight-current-row
              @current-change="handleCurrentChange"
              :header-cell-style="{ 
      background:'#f8f8f8'}"
              size="mini"
            >
              <el-table-column
                prop="num"
                label="指定渠道编码"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="指定渠道名称"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="所在省"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>

      </el-card>
      <!-- 2.产品政策 -->
      <fieldset
        class='fieldset num2'
        align="center"
      >
        <legend>

          <el-badge
            class="mark"
            type="primary"
            :value="2"
          />
          <p>
            产品政策
          </p>
        </legend>
      </fieldset>
      <el-row>

        <el-col :span="4">
          <el-button
            type="primary"
            size="mini"
          >添加产品</el-button>
        </el-col>
        <el-col
          :span="4"
          style='font-size:14px;line-height:28px'
        >
          <span>购进总指标(万元):￥152.65</span>
        </el-col>
        <el-col
          :span="12"
          style='font-size:14px;line-height:28px'
        >
          <span>指标按季度分解(万元):【Q1】￥12.5，【Q2】￥12.5，【Q3】￥12.5，【Q4】￥12.5</span>
        </el-col>
        <el-col
          :span="4"
          style='font-size:14px;line-height:28px'
        >
          <span>纯销总指标(万元):￥152.65</span>
        </el-col>

      </el-row>
      <el-card style="margin-top:10px;">
        <el-row>
          <el-col :span="6">
            <el-form-item label="产品">
              <el-select
                v-model="form.product"
                placeholder="选择产品"
              >
                <el-option
                  label="美复胶丸 24粒/盒"
                  :value="0"
                ></el-option>
                <el-option
                  label="美复胶丸 23粒/盒"
                  :value="1"
                ></el-option>

              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="协议效期">
              <el-date-picker
                v-model="form.productDate"
                type="datetimerange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
              >
              </el-date-picker>

            </el-form-item>
          </el-col>
          <el-col :span="1">
            <el-button
              type="warning"
              size="mini"
            >删除</el-button>
          </el-col>
        </el-row>
        <el-row style="margin-top:1px solid #ccc">
          <el-table
            :data="form.productDate"
            style="width: 100%"
            :header-cell-style="{ 
      background:'#f8f8f8'}"
            size="mini"
          >
            <el-table-column label="协议价（元）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.money"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="票折（元）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.discount"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="购进指标量（大单位）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.number1"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="购进指标量（小单位）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.number2"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="购进金额（万元）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.price"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="纯销指标量（小单位）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.saleNumber"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="纯销指标金额（万元）">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.salePrice"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="form.productDate"
            style="width: 100%"
            :header-cell-style="{ 
      background:'#f8f8f8'}"
            size="mini"
          >
            <el-table-column label="分销奖励">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.rewards"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="费用科目">
              <template slot-scope="scope">
                <el-select
                  size='mini'
                  placeholder="请选择"
                  v-model="scope.row.rewardsAcount"
                >
                  <el-option
                    label="单选项1"
                    :value="0"
                  >

                  </el-option>
                  <el-option
                    label="多选项1"
                    :value="1"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="零售配送">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.food"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="费用科目">
              <template slot-scope="scope">
                <el-select
                  size='mini'
                  placeholder="请选择"
                  v-model="scope.row.foodAcount"
                >
                  <el-option
                    label="单选项1"
                    :value="0"
                  >

                  </el-option>
                  <el-option
                    label="多选项1"
                    :value="1"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="医疗配送商">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.medical"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="科目费用">
              <template slot-scope="scope">
                <el-select
                  size='mini'
                  placeholder="请选择"
                  v-model="scope.row.medicalAcount"
                >
                  <el-option
                    label="单选项1"
                    :value="0"
                  >

                  </el-option>
                  <el-option
                    label="多选项1"
                    :value="1"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="自定义7">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.custom1"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="自定义8">
              <template slot-scope="scope">
                <el-input
                  size='mini'
                  placeholder="请输入"
                  v-model="scope.row.custom2"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-card>
      <!-- 补充协议3 -->
      <fieldset
        class='fieldset num2'
        align="center"
      >
        <legend>

          <el-badge
            class="mark"
            type="primary"
            :value="3"
          />
          <p>
            补充协议
          </p>
        </legend>
      </fieldset>
      <el-card>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(item,index) in form.textAreaList"
            :key="item.id"
            :label="item.title"
            :name="item.title"
          >
            <el-row>
              <el-col :span="22">协议内容：</el-col>
              <el-col :span="2">
                <el-button
                  size='mini'
                  type='warning'
                >删除</el-button>
              </el-col>
            </el-row>
            <el-row style="margin-top:10px;">
              <el-input
                type="textarea"
                v-model="item.content"
              ></el-input>
            </el-row>
          </el-tab-pane>

        </el-tabs>
      </el-card>

    </el-form>

    <el-row class="submit">
      <el-col>

        <el-button
          type="primary"
          size="mini"
        >保存</el-button>

      </el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: 'HomeIndex',
  components: {},
  props: {},
  data () {
    return {
      tableData: [{
        num: 'bj000',
        name: '宁波九州',
        address: '浙江省'
      }, {
        num: 'bj001',
        name: '国药控股',
        address: '浙江省'
      }, {
        num: 'bj002',
        name: '老百姓药业',
        address: '浙江省'
      }],
      activeName: '补充协议1',
      form: {
        client: '',//协议客户
        status: null,//协议状态
        purchase: "",//购进指标类型
        purchaseNumber: "",//金额/数量
        sales: "",//纯销指标类型
        salesNumber: "",//金额/数量
        date: '',//签订时间
        channel: '',//购进渠道
        channelNum: null,//渠道编码
        productDate: [{
          money: null,//协议价
          discount: null,//票折
          number: null,//购进指标量
          number2: null,//购进指标量
          price: null,//购进金额
          saleNumber: null,//纯销指标量
          salePrice: null,//纯销指标金额
          rewards: null,//分销奖励
          rewardsAcount: 0,//费用科目
          food: null,//零食配送
          foodAcount: 1,//费用科目
          medical: null,//医疗配送商
          medicalAcount: 1,//费用科目
          custom1: null,//自定义1
          custom2: null,//自定义2
        }],
        textAreaList: [
          {
            title: "补充协议1",//
            content: ''
          },
          {
            title: "协议内容2",//
            content: ''
          },
          {
            title: "协议内容3",//
            content: ''
          }
        ]
      },
      //   currentRow: null,
      formRules: {
        client: [
          { required: true, message: "请选择协议客户", trigger: "blur" },
        ],
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    //   购买渠道指定渠道选择
    handleCurrentChange (val) {
      //   this.currentRow = val;
      console.log(val);
      this.form.channelNum = val.num
    },
    handleClick (tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  .header-content {
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    .clearfix {
      padding: 10px 0 10px 20px;
    }
  }
  .page-title {
    margin-top: 10px;
    font-weight: 600;
  }
}

.num1 {
  margin-top: 60px;
}
.num2 {
  margin-top: 10px;
}
.fieldset {
  width: 300;
  height: 1;
  border: 0;
  border-top: 1px dashed #ccc;
  legend {
    padding: 0 20px;
    p {
      display: inline-block;
      font-weight: 600;
      font-size: 16px;
      margin-left: 10px;
    }
  }
}
.submit {
  width: 100%;
  height: 50px;
  padding-top: 10px;
  padding-left: 10px;
  margin-top: 10px;
  position: sticky;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
}
</style>